html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
.cube {
    width: 100%;
    height: 100%;
    background: gray;
    margin: 0;
    padding: 0;
    perspective: 1000px;
}

/*.cube{
    width: 480px;
    height: 800px;
   transform-style: preserve-3d;
   transform-origin: bottom right;
   animation: play 5s linear infinite;
}*/
.cube div{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    /*
    left: 0;
    top: 0;
    opacity: 1;*/
    transform-style: preserve-3d;
    transform-origin: bottom right;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: bottom right;
}
.cube div:nth-child(1){
    background: red;/*url(1.jpg) no-repeat;*/
    transform: rotateY(0deg) translateX(0px);
    -webkit-transform: rotateY(0deg) translateX(0px);
}
.cube div:nth-child(2){
    background: blue;/*url(2.jpg) no-repeat;*/
    transform: rotateY(-15deg) translateX(0px);
    -webkit-transform: rotateY(-15deg) translateX(0px);

    /*transform-origin: bottom right;*/

}
.cube div:nth-child(3){
    background: pink;/*url(3.jpg) no-repeat;*/
    transform:rotateY(-30deg) translateX(0px);
    -webkit-transform:rotateY(-30deg) translateX(0px);

}
.cube div:nth-child(4){
    background: green;/*url(4.jpg) no-repeat;*/

    transform:rotateY(-45deg) translateX(0px);
    -webkit-transform:rotateY(-45deg) translateX(0px);

}
.cube div:nth-child(5){
    background: gray/*url(5.jpg) no-repeat;*/
    -webkit-transform:rotateY(-60deg) translateX(0px);

    transform:rotateY(-60deg) translateX(0px);

}
.cube div:nth-child(6){
    background: black;/*url(6.jpg) no-repeat;*/
    -webkit-transform:rotateY(-75deg) translateX(0px);

    transform:rotateY(-75deg) translateX(0px);
}
.box div:nth-child(7){
    background: yellow;/*url(7.jpg) no-repeat;*/
    -webkit-transform:rotateY(-90deg) translateX(0px);

    transform:rotateY(-90deg) translateX(0px);
}
.cube div:nth-child(8){
    background: url(8.jpg) no-repeat;
    -webkit-transform:rotateY(-90deg) translateX(0px);

    transform:rotateY(-105deg) translateX(0px);
}
.cube div:nth-child(9){
    background: url(9.jpg) no-repeat;
    -webkit-transform:rotateY(-90deg) translateX(0px);

    transform:rotateY(-120deg) translateX(0px);
}
.cube div:nth-child(10){
    background: url(10.jpg) no-repeat;
    transform:rotateY(-135deg) translateX(0px);

    -webkit-transform:rotateY(-90deg) translateX(0px);
}